<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
        <title></title>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet/less" type="text/css" href="styles.less">
        <script src="http://cdn.bootcss.com/less.js/1.7.4/less.js" type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <style>
            body
            {
                

                margin-top:5px;
                background-color: #394F63;
            }
            #topFrame
            {
                width: 1000px;
                height: 60px;

                background-color: #394F63;

                padding-left: 80px;
            }
            #topFrame>
            img,
            #topFrame>
            div
            {
                float: left;

                color: #FFFFFF;

                
                margin-left: 40px;
                margin-right: 40px;
            }
            #topFrame>
            div
            h4
            {
                padding-top:15px;
            }
            .row
            {
                width: 1300px;
                
                margin: auto;
            }
            #bodyFrame
            {
                width: 1300px;
                height:670px;

                background-color: #F1F1F2;

                padding-top: 20px;
                padding-bottom: 80px;
            }
            #mainFrame
            {
                width: 1300px;

            }
            
            #leftFrame
            {
                width: 150px;
                height: 550px;
                float: left;

                border-right:2px solid #DDDDDD;
                padding-top: 10px;
                padding-left: 10px;
                padding-right: 10px;
            }
            

            #rightFrame
            {
                float: left;
                height: 500px;

                background-color: #F1F1F2;

                padding-left: 40px;
            }
            .tableSearchBar
            {
                float: right;

                padding-right:5px;
                padding-bottom:5px;
            }
            pre
            {
                overflow-y: scroll; 
                overflow-x:scroll;
                height: 500px;
                max-height: 500px;
                width:1050px;


                background-color:#FFFFFF;
            }

            #footFrame
            {
                width: 1300px;

                background-color: #F1F1F2;
                padding-bottom: 15px;
            }
            #footFrame>
            div
            {
                width: 100%;

                margin-left: auto;
                margin-right: auto;
            }
            
            a:link 
            {
             color: #FFFFFF;
             text-decoration: none;
            }
            a:visited 
            {
             color: #FFFFFF;
             text-decoration: none;
            }
            a:hover 
            {
             color: #FFFFFF;
             text-decoration: underline;
            }
            a:active 
            {
             color: #FFFFFF;  
             text-decoration: underline;
            }

        </style>

        
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div id="topFrame">
                    <img src="../static/img/logo.png"/>
                    <div><a href="#"><h4>首页</h4></a></div>
                    <div><a href="#"><h4>找朋友</h4></a></div>
                    <div><a href="#"><h4>个人主页</h4></a></div>
                    <div><a href="#"><h4>后台管理</h4></a></div>
                </div>
                <div class="col-md-12" id="bodyFrame">
                    <div class="row">
                        <div id="mainFrame">
                            <div id="leftFrame">
                                <div class="btn-group-vertical btn-group-lg">

                                    <button type="button" class="btn btn-default">子管理员名单</button>
                                    <button type="button" class="btn btn-default">用戶言论</button>
                                    <button type="button" class="btn btn-default">黑名单</button>
                                </div>
                            </div>
                            <div id="rightFrame" >
                                <h3>用户言论</h3>
                                <form class="form-inline" role="form">
                                    <div class=" tableSearchBar">
                                        <select class="form-control input-sm col-xs-4" id="speech">
                                          <option>帖子</option>
                                          <option>评论</option>
                                        </select>
                                        <script type="text/javascript">
                                            $(document).ready(function(){
                                                $("#comment").hide();
                                            });
                                            $(document).ready(function(){
                                                $("#speech").change(function(){
                                                    $("#post").toggle();
                                                    $("#comment").toggle();
                                                });
                                            });
                                        </script>
                                        <select class="form-control input-sm col-xs-4">
                                          <option>今天</option>
                                          <option>昨天</option>
                                          <option>一星期內</option>
                                          <option>兩星期內</option>
                                          <option>全部</option>
                                        </select>
                                        <input type="text" class="form-control  input-sm" placeholder="帖子ID、昵称" >
                                    </div>
                                </form>
                                <pre>
                                    <table class="table table-hover" id ="post">
                                        <thead>
                                            <th>帖子ID</th>
                                            <th>昵称</th>
                                            <th>邮箱</th>
                                            <th>內容</th>
                                            <th>时间</th>
                                            <th></th>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>小熊</td>
                                                <td>11XXXXXXXXX</td>
                                                <td style="width:500px;">
                                                    每个人都有五个不停旋转的的球:工作、健康、家庭、朋友和灵魂。工作是橡胶球，掉下会弹起来；而另外四个都是玻璃球，掉了-----就碎了。
                                                </td>
                                                <td>2014-8-13  10:00</td>
                                                <td>
                                                    <button type="button" class="btn btn-danger"  data-toggle="modal" data-target="#myModal">刪帖</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>1</td>
                                                <td>小熊</td>
                                                <td>11XXXXXXXXX</td>
                                                <td style="width:500px;">
                                                    每个人都有五个不停旋转的的球:工作、健康、家庭、朋友和灵魂。工作是橡胶球，掉下会弹起来；而另外四个都是玻璃球，掉了-----就碎了。
                                                </td>
                                                <td>2014-8-13  10:00</td>
                                                <td>
                                                    <button type="button" class="btn btn-danger"  data-toggle="modal" data-target="#myModal">刪帖</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                        
                                    </table>
                                    <table class="table table-hover" id ="comment">
                                        <thead>
                                            <th>评论ID</th>
                                            <th>帖子ID</th>
                                            <th>昵称</th>
                                            <th>邮箱</th>
                                            <th>內容</th>
                                            <th>时间</th>
                                            <th></th>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>1</td>
                                                <td>小熊</td>
                                                <td>11XXXXXXXXX</td>
                                                <td style="width:300px;">
                                                    GOOD
                                                </td>
                                                <td>2014-8-13  10:00</td>
                                                <td>
                                                    <button type="button" class="btn btn-danger"  data-toggle="modal" data-target="#myModalTwo">刪帖</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>1</td>
                                                <td>1</td>
                                                <td>小熊</td>
                                                <td>11XXXXXXXXX</td>
                                                <td style="width:300px;">
                                                    GOOD
                                                </td>
                                                <td>2014-8-13  10:00</td>
                                                <td>
                                                    <button type="button" class="btn btn-danger"  data-toggle="modal" data-target="#myModalTwo">刪帖</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                        
                                    </table>
                                </pre>
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                          <div class="modal-dialog">
                                            <div class="modal-content">
                                              <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                                <h4 class="modal-title" id="myModalLabel">刪除帖子</h4>
                                              </div>
                                              <div class="modal-body" >
                                                    <h4>将     小熊(xxxxxxx),帖子ID:1   的帖子刪除</h4>
                                                    <form class="form-horizontal" role="form">
                                                      <div class="form-group">
                                                        <label class="col-sm-3 control-label" for="formGroupInputLarge">原因</label>
                                                        <div class="col-sm-9">
                                                          <input class="form-control" type="text"  placeholder="">
                                                        </div>
                                                      </div>
                                                      <h4>列入黑名单</h4>
                                                      <div class="form-group">
                                                        <label class="col-sm-3 control-label" for="formGroupInputLarge">加入黑名单</label>
                                                        <div class="col-sm-9">
                                                          <select class="form-control">
                                                              <option>不加入黑名单</option>
                                                              <option>封号</option>
                                                              <option>禁言</option>
                                                          </select>
                                                        </div>
                                                      </div>
                                                      <div class="form-group">
                                                        <label class="col-sm-3 control-label" for="formGroupInputLarge">期限</label>
                                                        <div class="col-sm-9">
                                                          <select class="form-control">
                                                              <option>无</option>
                                                              <option>永久</option>
                                                              <option>一年</option>
                                                              <option>半年</option>
                                                              <option>一個月</option>
                                                              <option>一週</option>
                                                          </select>
                                                        </div>
                                                      </div>
                                                    </form>
                                              </div>
                                              <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                <button type="button" class="btn btn-danger">确定</button>
                                              </div>
                                            </div>
                                          </div>
                                        </div>

                                        <div class="modal fade" id="myModalTwo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                          <div class="modal-dialog">
                                            <div class="modal-content">
                                              <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                                <h4 class="modal-title" id="myModalLabel">刪除帖子</h4>
                                              </div>
                                              <div class="modal-body" >
                                                    <h4>将     小熊(xxxxxxx),评论ID:1   的评论刪除</h4>
                                                    <form class="form-horizontal" role="form">
                                                      <div class="form-group">
                                                        <label class="col-sm-3 control-label" for="formGroupInputLarge">原因</label>
                                                        <div class="col-sm-9">
                                                          <input class="form-control" type="text"  placeholder="">
                                                        </div>
                                                      </div>
                                                      <h4>列入黑名单</h4>
                                                      <div class="form-group">
                                                        <label class="col-sm-3 control-label" for="formGroupInputLarge">加入黑名单</label>
                                                        <div class="col-sm-9">
                                                          <select class="form-control">
                                                              <option>不加入黑名单</option>
                                                              <option>封号</option>
                                                              <option>禁言</option>
                                                          </select>
                                                        </div>
                                                      </div>
                                                      <div class="form-group">
                                                        <label class="col-sm-3 control-label" for="formGroupInputLarge">期限</label>
                                                        <div class="col-sm-9">
                                                          <select class="form-control">
                                                              <option>无</option>
                                                              <option>永久</option>
                                                              <option>一年</option>
                                                              <option>半年</option>
                                                              <option>一個月</option>
                                                              <option>一週</option>
                                                          </select>
                                                        </div>
                                                      </div>
                                                    </form>
                                              </div>
                                              <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                <button type="button" class="btn btn-danger">确定</button>
                                              </div>
                                            </div>
                                          </div>
                                        </div>

                            </div>
                        </div>        
                    </div>  
                </div>


                <div id="footFrame" >
                       <div style="text-align: center;"> &copy; 2014汕大交友网  </div>
                </div> 


            </div>
            
        </div>
    </body>
</html>